<script setup>
    import { reactive, ref, watch, computed, onMounted } from "vue"
    import { useRouter } from "vue-router"

    import { useAsideMenu } from "../storePiana/index"
    const AsideMenu = useAsideMenu()
    const router = useRouter()
    //pinia
    import {
        useCollapseStore,
        useSelectMenu,
        useToken,
    } from "../storePiana/index"
    //头像动态引入
    const getImaSrc = (user) => {
        return new URL(`../assets/images/${user}.png`, import.meta.url).href
    }

    const CollapseStore = useCollapseStore()
    let handleCollapse = () => {
        CollapseStore.handleCollapse()
    }
    //pinia
    let SelectMenu = useSelectMenu()
    let current = computed(() => {
        return SelectMenu.currentMenu
    })
    let Token = useToken()

    //退出
    const exit = () => {
        AsideMenu.cleanMenu()
        router.push({
            name: "login",
        }),
            //清楚token
            Token.clearToken()
    }
</script>

<template>
    <el-header>
        <div class="l-content">
            <el-button @click="CollapseStore.handleCollapse()">
                <el-icon><Menu /></el-icon>
            </el-button>
            <el-breadcrumb separator="/" class="bread">
                <!-- 首页要保留 -->
                <el-breadcrumb-item :to="{ path: '/' }">
                    首页
                </el-breadcrumb-item>
                <el-breadcrumb-item
                    :to="{ path: current.path }"
                    v-if="current"
                    >{{ current.label }}</el-breadcrumb-item
                >
            </el-breadcrumb>
        </div>
        <div class="r-content">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img class="user" :src="getImaSrc('user')" alt="" />
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item @click="exit()"
                            >退出</el-dropdown-item
                        >
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<style lang="less" scoped>
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background-color: #333;
    }
    .r-content {
        .user {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 20px;
        }
    }
    .l-content {
        display: flex;
        align-items: center;
        h3 {
            color: #fff;
        }
        .el-button {
            margin-right: 20px;
        }
    }
    .l-content {
        margin-left: 20px;
    }
    .bread /deep/ span {
        color: #fff !important;
        cursor: pointer !important;
    }
</style>
